<template>
  <div class="trends2-doctor-list-1" data-number="武德元年">
    <template v-for="(itemInfo,index) in doctorDataClean">
      <div class="first-group" :key="index">
        <template v-for="(item,index) in itemInfo">
          <div class="doctor-info-item" :key="index">
            <div class="top-wrap">
              <div class="left-wrap">
                <img :src="getDoctorPicture(item)" alt="医生" @error='handleError'/>
              </div>
              <div class="right-wrap">
                <div class="name-level-dept-register">
                  <div class="name-level">
                    <div class="name item">{{ item.workerName || '\u00a0' }}</div>
                    <div class="level item">
                      <ScrollX>{{ item.workerTitle }}</ScrollX>
                    </div>
                  </div>
                  <div class="dept-register">
                    <div class="dept item" v-if="optionsInfo.doctorDept">
                      <ScrollX>{{ item.deptName || '\u00a0' }}</ScrollX>
                    </div>
                    <div class="register item" v-if="optionsInfo['registerShow']&&(item?.preTreatingPatient?.length)">
                      <ScrollX>{{ item?.preTreatingPatient[0]?.registerObjName || '\u00a0' }}</ScrollX>
                    </div>
                    <div class="describe item">
                      <ScrollY :content="(item.workerIntro) || '\u00a0'" :pageDuration="6"/>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="bottom-wrap">
              <div class="patient-wrap">
                <div class="current-patient patient" :class="{'current-patient-only': !optionsInfo['waitPatientShow']}">
                  <div class="patient-type-sign">
                    {{ optionsInfo['waitPatientShow'] ? '就诊' : '正在就诊' }}
                  </div>
                  <div class="patient-content"
                       :class="{'current-patient-content':item.treatingPatient?.length>=2}">
                    <vue-seamless-scroll
                        class="scroll"
                        :ref="`scroll-${item.workerId}`"
                        :class-option="optionScroll"
                        :data="(item.treatingPatient)"
                    >
                      <template v-for="itemPatient in (item.treatingPatient)">
                        <div class="patient-item">
                          <template v-if="itemPatient.orderNo">
                            {{ itemPatient.orderNo || '\u00a0' }}
                          </template>
                          <template v-if="itemPatient.patientName">
                            {{ itemPatient.patientName || '\u00a0' }}
                          </template>
                        </div>
                      </template>
                    </vue-seamless-scroll>
                  </div>
                </div>
                <div class="wait-patient patient" v-if="optionsInfo['waitPatientShow']">
                  <div class="patient-type-sign">候诊</div>
                  <div class="patient-content"
                       :class="{'wait-patient-content':item.waitingPatientList?.length>=2}">
                    <vue-seamless-scroll
                        class="scroll"
                        :ref="`scroll-${item.workerId}`"
                        :class-option="optionScroll"
                        :data="(item.waitingPatientList)"
                    >
                      <template v-for="itemPatient in (item.waitingPatientList)">
                        <div class="patient-item">
                          <template v-if="itemPatient.orderNo">
                            {{ itemPatient.orderNo }}
                          </template>
                          <template v-if="itemPatient.patientName">
                            {{ itemPatient.patientName }}
                          </template>
                        </div>
                      </template>
                    </vue-seamless-scroll>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
    </template>
  </div>
</template>

<script>
import {v4 as uuid} from 'uuid';
import vueSeamlessScroll from 'vue-seamless-scroll';
import ScrollX from "@c/public/seamlessScroll/ScrollX.vue";
import ScrollY from "@c/public/seamlessScroll/ScrollY.vue";

export default {
  name: "trends1DoctorList-1",

  componentName: "trends2DoctorList",

  components: {
    ScrollY,
    ScrollX,
    vueSeamlessScroll
  },

  props: {
    devType: {
      type: Boolean,
      default: false,
    },
    field: {
      type: Object,
      default: Object(),
    },
    doctorData: {
      type: Array,
      default: Array(),
    }
  },

  data() {
    return {
      status: true,
      widgetKey: uuid(),
      optionsInfo: Object(),
      header: require("@a/images/design/header.jpeg"),
      pause: require("@a/images/design/pause.png"),
    }
  },

  computed: {
    optionScroll() {
      return {
        hoverStop: true,
        direction: 1,                 // 0向下 1向上 2向左 3向右
        isSingleRemUnit: true,
        step: [1, 1.5, 2, 2.5, 3][0], // 数值越大速度滚动越快
        limitMoveNum: 2,              // 开始无缝滚动的数据量 this.dataList.length
      };
    },

    // 获取医生头像
    getDoctorPicture() {
      return function (row) {
        let isPause = (row?.isPause);
        let header = '/tpleditor/resource/assets/images/header.png';
        if (!isPause) {
          return (row.workerPicture) || header
        } else {
          return this.pause;
        }
      }
    },

    doctorDataClean() {
      return this.$lodash.chunk(this.doctorData, 1)
    }
  },

  mounted() {

  },

  methods: {
    handleError(event) {
      event.target.src = '/tpleditor/resource/assets/images/header.png'
    },
  },

  watch: {
    field: {
      handler: function (val) {
        let key = (val.options.config)
        this.optionsInfo = val.options[key];
      },
      deep: true,
      immediate: true
    }
  }

};
</script>

<style lang="scss" scoped>
.trends2-doctor-list-1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-shrink: 0;
  overflow: hidden;

  .first-group {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    flex-grow: 1;
    box-sizing: border-box;
    overflow: hidden;
    flex-basis: 100%;

    .doctor-info-item {
      flex: 1;
      flex-shrink: 0;
      flex-basis: 0;
      height: calc(100%);
      width: 100%;
      overflow: hidden;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;

      .top-wrap {
        width: 100%;
        height: 530px;
        flex-shrink: 0;
        overflow: hidden;
        font-size: 24px;
        margin-bottom: 10px;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        .left-wrap{
          width: 358px;
          height: 100%;
          flex-shrink: 0;
          overflow: hidden;
          font-size: 24px;
          margin-right: 15px;
          border-radius: 18px;
          background: #E8E8E8;
          box-sizing: border-box;
          img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            border: 1px #dcdee2 solid;
          }
        }
        .right-wrap{
          margin-left: 15px;
          box-sizing: border-box;
          width: calc(100% - 358px - 30px);
          .name-level-dept-register {
            font-weight: 500;
            font-size: 60px;
            color: #333333;
            line-height: 1.5;
            height: 100%;
            width: 100%;
            flex-shrink: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;

            .name-level {
              display: flex;
              line-height: initial;
              flex-direction: row;
              align-items: center;
              align-content: center;
              justify-content: center;

              .item {
                flex-shrink: 0;
                flex-grow: 1;
                flex-basis: 0;
                overflow: hidden;
                box-sizing: border-box;
              }

              .name {
                font-weight: 500;
                font-size: 78px;
                color: #333333;
                display: flex;
                max-width: 314px;
                flex-grow: 0;
                flex-basis: auto;
                margin-right: 26px;
                white-space: nowrap;
                box-sizing: border-box;
                text-overflow: ellipsis;
              }

              .level {
                font-weight: 500;
                font-size: 36px;
                color: #FFFFFF;
                padding: 32px 16px;
                border-radius: 8px;
                overflow: hidden;
                text-align: center;
                display: flex;
                flex-shrink: 0;
                flex-grow: 1;
                max-height: 54px;
                background: rgba(0, 89, 179, 1);
              }
            }

            .dept-register {
              display: flex;
              box-sizing: border-box;
              flex-direction: column;
              justify-content: center;
              align-content: center;
              height: calc(100% - 120px);

              .item {
                flex-shrink: 0;
                overflow: hidden;
                color: #0059B3;
                font-weight: 500;
                font-size: 42px;
                line-height: inherit;
                white-space: nowrap;

                :deep(.st-inner) {
                  margin: inherit;
                }
              }

              .dept {
                margin-bottom: 2px;
              }

              .register {
                padding-bottom: 8px;
              }

              .describe{
                flex-grow: 1;
                height: 0;
                overflow: hidden;
                white-space: initial;
                font-weight: 400;
                font-size: 36px;
                color: #333333;
                line-height: 1.42;
              }
            }

          }
        }

      }

      .bottom-wrap {
        width: calc(100%);
        height: calc(100% - 530px);
        overflow: hidden;
        box-sizing: border-box;

        .patient-wrap {
          display: flex;
          flex-direction: column;
          flex-grow: 1;

          .patient {
            height: 338px;
            overflow: hidden;
            border-radius: 18px;
            display: flex;

            .patient-type-sign {
              flex-basis: 136px;
              flex-shrink: 0;
              height: 100%;
              font-size: 60px;
              display: flex;
              justify-content: center;
              align-content: center;
              align-items: center;
              align-self: center;
              text-align: center;
              flex-direction: column;
            }

            .patient-content {
              display: flex;
              flex-direction: column;
              flex-basis: calc(100% - 136px);
              height: 100%;
              justify-content: center;

              .patient-item {
                width: calc(100% - 30px);
                font-size: 116px;
                color: #333333;
                line-height: 1.4;
                padding-left: 30px;
                white-space: nowrap;
              }
            }
          }

          .current-patient {
            margin-bottom: 20px;
            margin-top: 30px;
            background: rgba(0, 89, 179, 0.2);

            .patient-type-sign {
              background: rgba(0, 89, 179, 1);
              color: white;
            }

            .patient-content {
              .patient-item {
                color: rgba(0, 89, 179, 1);
              }
            }

            .current-patient-content {
              justify-content: flex-start;

              .patient-item {
                line-height: 1.5;
              }
            }

          }

          //隐藏候诊患者
          .current-patient-only {
            height: 708px;
            display: flex;
            flex-direction: column;

            .patient-type-sign {
              width: 100%;
              flex-basis: 274px;
              font-size: 120px;
              overflow: hidden;
              writing-mode: inherit;
            }

            .patient-content {
              overflow: hidden;
              flex-basis: calc(100% - 274px);
              .patient-item {
                font-size: 168px;
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                padding-left: 0;
                text-align: center;
                box-sizing: border-box;
              }
            }
          }

          .wait-patient {
            margin-top: 20px;
            background: rgba(229, 134, 2, 0.2);
            .patient-type-sign {
              background: rgba(229, 134, 2, 1);
              color: white;
            }

            .patient-content {
              .patient-item {
                color: rgba(229, 134, 2, 1);
              }
            }

            .wait-patient-content {
              justify-content: flex-start;

              .patient-item {
                line-height: 1.5;
              }
            }
          }
        }
      }
    }
  }
}
</style>